<!-- myNotify -->
<template>
    <!-- <el-container>
        <el-main style="padding:0 0 0 10px;"> -->
            <!-- 卡片 -->
        <!-- <el-card class="box-card el-card-flex"> -->
            <!-- 表格 -->
            <div style="height:100%">
                <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
                    <el-form-item style="float:right">
                        <el-button type="primary" @click='handleTaskAdd()' plain>
                            新增分类
                            <i class="el-icon-plus"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
                    <div style="height:90%">
                        <el-table border height="100%" :data="tableData" stripe ref="tableData">
                        <el-table-column prop="rootCatName" min-width="100px" label="会议室类型" align="left" sortable
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="orgName" min-width="100px" label="所属组织" align="left" sortable
                        show-overflow-tooltip></el-table-column>
                        <el-table-column prop="number" min-width="100px" label="数量" align="right" sortable
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="approveCat" min-width="100px" label="审批" align="left" sortable
                        show-overflow-tooltip :formatter="row => agentStatusObj[row.approveCat]"></el-table-column>
                        <el-table-column prop="control" align="center" label="操作" width='150'>
                            <template slot-scope="scope">
                            <el-button class="td-btn-icon" type="text" title="编辑" @click='handleTaskEdit(scope.$index, scope.row)' icon="el-icon-edit"></el-button>
                                <el-button class="td-btn-icon" type="text" title="删除" @click.native.prevent="deleteRow(scope.$index, scope.row)" icon="el-icon-delete"></el-button>
                            </template>
                        </el-table-column>
                        
                    </el-table>
                    </div>
                    <!-- <el-pagination style="background: #fff; height: 32px; padding-top: 11px;left: 7px;" class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    background :current-page="currentPage" :page-sizes="[20, 25, 30, 35]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination> -->
                    <el-dialog
            :title="dialogAppTitle"
            :visible.sync="dialogAppVisible"
            :before-close="handleClose" 
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="40%"
            >
                <el-form ref="formData" label-width="130px" :model="formData">
                    <el-form-item label="会议室类型:" prop="rootCatName" :rules="[{required: true,message: '请输入会议室类型'}]">
                        <el-col :span="12">
                            <el-input placeholder="请输入会议室类型" v-model="formData.rootCatName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="所属组织:" prop="orgId" :rules="[{required: true,message: '请选择组织'}]">
                        <el-col :span="18">
                            <el-input placeholder="请选择组织" v-model="formData.orgName" readonly>
                                <i v-show="formData.orgName" slot="suffix" @click="clearprincipalName" class="el-input__icon el-icon-circle-close" style="cursor: pointer;"></i>
                                <el-button slot="append" icon="el-icon-search" @click="principalPeople"></el-button>
                            </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="审批设置:" prop="approveCat" :rules="[{required: true,message: '请选择审批设置'}]">
                        <el-radio-group v-model="formData.approveCat" @change="radioChange">
                            <el-col :span="24">
                                <el-radio label="1" border>服务员审批</el-radio>
                                <!-- <el-radio label="2" border>流程审批</el-radio><el-button :disabled="isdisable">流程设置</el-button> -->
                            </el-col>
                            
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="会议取消控制:" prop="cancelCtrl">
                        <el-col :span="24">
                            <el-checkbox v-model="formData.cancelCtrl" label=""  @change="checkboxChange">
                                
                            </el-checkbox>
                            会议开始前 
                                <el-select size="mini" v-model="formData.cancelIntervalTime" :disabled="isDisabled" placeholder="请选择" style="width:70px">
                                    <el-option label="0" value="0"></el-option>
                                    <el-option label="15" value="15"></el-option>
                                    <el-option label="30" value="30"></el-option>
                                    <el-option label="45" value="45"></el-option>
                                    <el-option label="60" value="60"></el-option>
                                </el-select> 
                                分钟内禁止取消已预定会议
                        </el-col>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleCheck('formData')">
                    确定
                    <i class="el-icon-document-checked el-icon--right"></i>
                    </el-button>
                    <el-button @click="handleClose('formData')">
                    取消
                    <i class="el-icon-refresh-left"></i>
                    </el-button>
                </span>
            </el-dialog>
            <selectOrg
            :schedulePersonList="formData"
            :dialogPersonnelVisible="dialogprincipalVisible"
            :multiple="false"
            @dialogEmployeesData="dialogprincipalCheckSure"/>
                </div>
            
            <!-- </el-card> -->
            
            
        <!-- </el-main>
    </el-container> -->
        
    </template>
    <script>
        import {
            Tree,
            Dialog,
            Table,
            TableColumn,
            Pagination,
            MessageBox,
            Message,
            Tag,
            Upload,
            Drawer
        } from 'element-ui';
        
        import {
            categoryList, //会议室类型列表
            addCategory, //新增会议室类型
            getCategory, //获取会议室类型详情
            putCategory, //修改会议室类型
            delCategory, //删除会议室类型
            getProcessByBusinessCode,//查询业务流程配置
            getHsaMeeting,//查询会议室类型下是否有未审批的会议
        } from '@/api/conference/conferenceManage.js'
        // import selectPersonnelDalog from "@/components/selectPersonnel"
        import selectOrg from '../selectOrg'
        export default {
            name: 'location',
            components: {
            'el-tree': Tree, //树形菜单
            'el-dialog': Dialog, //对话框
            'el-table': Table, //表格
            'el-table-column': TableColumn, //表格列
            'el-pagination': Pagination, //分页
            'el-tag': Tag, //标签
            'el-upload': Upload,
            'el-drawer': Drawer,
            // selectPersonnelDalog,
            selectOrg
            },
            data() {
                return {
                    pageSize: 20,
                    total: 0,
                    currentPage: 1,
                    tableData:[],
                    dialogAppVisible: false,
                    dialogAppTitle:'新增分类',
                    formData:{
                        rootCatName:'',
                        orgId: '',
                        orgName:'',
                        approveCat:'1',
                        cancelCtrl:'',
                        cancelIntervalTime:'30',
                        roomCatId:'',
                        processId:''
                    },
                    dialogprincipalVisible:false, //选择人员
                    isdisable: true,
                    isshow: false,
                    isDisabled: true,
                    agentStatusObj: {
                        1: '服务员审批',
                        2: '流程审批',
                    },
                    BusinessCode: '',
                    approve:''
                };
            },
            
            created() {
                this.getTabTree()
                // getProcessByBusinessCode().then((res)=>{
                //     if(res.data.code == 10000){
                        // this.BusinessCode = res.data.data.processCode
                //     }
                // })
                this.BusinessCode = 'JCPT_MEETING'
                window.onresize = () => {
                    this.$refs.tableData.doLayout()
                }
            },
            methods: {
                getTabTree(){
                  categoryList({}).then(res => {
                    if(res.data.code == 10000){
                      this.tableData = res.data.data.records
                    //   this.total = res.data.data.total
                      setTimeout(()=>{
                          this.$refs.tableData.doLayout()
                      },0)
                    }
                  }).catch(res => {
                    resolve([])
                  })
                  
                },
                //分配人员
                handleTaskAdd(){
                    this.dialogAppVisible = true;
                    this.dialogAppTitle = '新增分类'
                },
                //编辑
                handleTaskEdit(index,row){
                    this.dialogAppVisible = true;
                    this.dialogAppTitle = '修改分类'
                    getCategory(row.roomCatId).then((res)=>{
                        if(res.data.code == 10000){
                            this.formData = res.data.data
                            this.approve = this.formData.approveCat
                            if(this.formData.cancelCtrl == '2'){
                                this.formData.cancelCtrl = true
                                this.isDisabled = false;
                                // this.
                            }else{
                                this.formData.cancelCtrl = false
                                this.formData.cancelIntervalTime = '30'
                            }
                            // if(this.formData.cancelIntervalTime == ''){
                            //     this.formData.cancelIntervalTime = '30'
                            // }
                            if(this.formData.approveCat == '2'){
                                this.isdisable = false
                            }
                        }
                    })
                },
                //删除
                deleteRow(index,row){
                    var id = row.roomCatId
                    MessageBox.confirm('您是否确定删除选中内容', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        delCategory(id).then(res => {
                        if(res.data.code == 10000){
                            Message({
                            type: 'success',
                            message: '删除成功'
                            });
                             this.getTabTree()
                        }else{
                            // Message({
                            //     type: 'error',
                            //     message: res.data.msg
                            // });
                        }
                        
                        }).catch(res => {
                        
                        })
                    })
                },
                //确定按钮
                handleCheck(formName){
                    if(this.formData.cancelCtrl){
                        this.formData.cancelCtrl = '2'
                    }else{
                        this.formData.cancelCtrl = '1'
                    }
                    this.$refs[formName].validate((valid)=>{
                        if(valid){
                            if(!this.formData.roomCatId){
                        //         rootCatName:'',
                        // orgId: '',
                        // orgName:'',
                        // approveCat:'',
                        // cancelCtrl:'',
                        // cancelIntervalTime:'',
                        // roomCatId:''
                                addCategory({
                                    rootCatName: this.formData.rootCatName,
                                    orgId: this.formData.orgId,
                                    approveCat: this.formData.approveCat,
                                    cancelCtrl: this.formData.cancelCtrl,
                                    cancelIntervalTime: this.formData.cancelIntervalTime,
                                    processId: this.formData.processId
                                }).then((res)=>{
                                    if(res.data.code == 10000){
                                        Message({
                                            type: 'success',
                                            message: '新增成功'
                                        });
                                        this.getTabTree()
                                        this.handleClose('formData')
                                    }
                                })
                            }else{
                                putCategory({
                                    rootCatName: this.formData.rootCatName,
                                    orgId: this.formData.orgId,
                                    approveCat: this.formData.approveCat,
                                    cancelCtrl: this.formData.cancelCtrl,
                                    cancelIntervalTime: this.formData.cancelIntervalTime,
                                    roomCatId: this.formData.roomCatId,
                                    processId: this.formData.processId
                                }).then((res)=>{
                                    if(res.data.code == 10000){
                                        Message({
                                            type: 'success',
                                            message: '修改成功'
                                        });
                                        this.getTabTree()
                                        this.handleClose('formData')
                                    }
                                })
                            }
                        }
                    })
                },
                handleClose(formName){
                    this.dialogAppVisible = false;
                    this.$refs['formData'].resetFields();
                    this.formData.orgName = ''
                    this.formData.roomCatId = ''
                    this.isdisable = true;
                    this.isDisabled = true;
                },
                //单选框改变
                radioChange(v){
                    if(this.formData.roomCatId){
                        getHsaMeeting(this.formData.roomCatId).then((res)=>{
                            if(res.data.code == 10000){
                                if(!res.data.data){
                                    if(v == '2'){
                                        this.isdisable = false
                                        this.formData.processId = this.BusinessCode
                                    }else{
                                        this.isdisable = true;
                                        this.formData.processId = ''
                                    }
                                }else{
                                    Message({
                                        type: 'error',
                                        message: '该审批类型下有会议未审批'
                                    });
                                    this.formData.approveCat = this.approve
                                }
                            }
                        })
                    }else{
                        if(v == '2'){
                            this.isdisable = false
                            this.formData.processId = this.BusinessCode
                        }else{
                            this.isdisable = true;
                            this.formData.processId = ''
                        }
                    }
                 
                },
                checkboxChange(v){
                    if(v){
                        this.isDisabled = false;

                    }else{
                        this.isDisabled = true;
                        this.formData.cancelIntervalTime = '30'
                    }
                    // console.log(this.formData.cancelCtrl)
                },
               
                //人员弹框
                principalPeople(){
                    this.dialogprincipalVisible = true;
                    if(this.formData.orgName == ''){
                        this.formData.orgName = ''
                        this.formData.orgId = ''
                    }
                },
                dialogprincipalCheckSure(data){
                    this.dialogprincipalVisible = false
                    if (!data) {
                    return
                    }
                    console.log(data)
                    this.formData.orgId = data[0].orgId
                    this.formData.orgName = data[0].orgName
                    // this.formData.principal = data[0].empName
                    // this.formData.principalUserId = data[0].userId
                },
                clearprincipalName(){
                    this.formData.orgId = ''
                    this.formData.orgName = ''
                    // this.formData.principal = ''
                    // this.formData.principalUserId = ''
                },
                handleSizeChange(val) { //每页条数
                  this.pageSize = val;
                  this.getTabTree(this.formInline)
                },
                handleCurrentChange(val) { //当前页数
                  this.currentPage = val;
                  this.getTabTree(this.formInline)
                },
            }
        };
    </script>
          
<style lang="scss">
    .el-card__body {
        position: relative;
    }
    
    .pagination.el-pagination {
        position: absolute;
        bottom: 5px;
        left: 15px;
    }
    
    .el-form-tag {
        margin-bottom: 8px !important;
    }
    
    .el-form-tag .el-tag {
        margin-bottom: 10px;
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
/*    .el-input:not(.el-input--suffix) .el-input__inner[readonly]{
        background: none!important;
    } */
</style>
          
          